<template>
    <div style="height: 100vh;background:#fff;">
      <app-head :title="title"></app-head>
      <div class="content">
        <h1 class="title">{{datas.title}}</h1>
        <div class="flex_b" style="margin-top: 8px">
          <p >{{datas.firstTime}} - {{datas.lastTime}}</p>

        </div>
        <div class="text">
          {{datas.describe}}
        </div>
        <div class="flex_b" style="margin:28px 0;margin-bottom: 14px">
          <p >已有{{datas.joinNum}}人参与了征稿</p>

        </div>
        <div class="line" ></div>
      <div style="margin-top: 48px">
        <router-link  :to="{path:'/solicitPush2', query:{title:datas.title}}" >
          <button class="btn_d act">立即投稿</button>
        </router-link>
      </div>

        <!--留言板-->

      </div>

    </div>
</template>

<script>
  import AppHead from '@/components/Head'
    export default {
        name: "Solicit",

        components:{
          AppHead
        },
        data () {
          return {
            title: '征稿 | 活动标题',
            datas:[]
          }
        },
          mounted:function () {
            this.init()
          },
      methods:{
          init:function () {
            var that =this
            //获取文章内容
            this.$http({
              method: 'get',
              url: '/article/getSolicit',

            }).then(function (res) {

              that.datas = res.data.datas[0]

            }).catch(function (error) {

            })
          }
      }
    }
</script>

<style scoped lang="less">

  .content{
    padding: 14px 24px;
    padding-bottom: 30px;
    background: #fff;
    margin-top: 4px;
  }
  .title{
    color: #333;font-size: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: box;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    height: initial;
    -webkit-box-orient: vertical;
    white-space: initial;font-weight:400;text-align: left;line-height:30px;
  }
  .flex_b{
    justify-content: space-between;
  }
  .flex_b p{
    font-size:13px;
    color: #999;
    margin: 0;
  }
  .text{

    font-size:15px;
    line-height:27px;
    text-align: left;color: #444;



      width: 327px;
      outline: none;
      padding: 12px 16px;
      padding-left: 0!important;

      font-size: 15px;


  }

  .atta{
    border:1px solid #eee;
    padding: 8px 16px;
    text-align: left;
    margin: 16px 0;
  }
  .record{
    text-align: left;
  }
  .record span{
    font-size: 13px;
    color: #999999;
  }
  .word{
    margin-top: 32px;
    padding: 0 16px;
    background: #f4f4f4;
    font-size: 15px;
    color: #999;

  }
  .more{
    height:21px;
    font-size:15px;
    color: #ccc;
    text-align: center;
    padding: 16px 0;
  }
  .line{
    height:1px;width: 95%;
    background:rgba(238,238,238,1);
  }
  .que{
    display:-webkit-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    position: relative;
    .img_d{
      width: 34px;
      height: 34px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .name{
      font-size: 15px;
      color: #666;
    }
    .con{
    color: #444444;
      font-size:16px;
      line-height: 22px;
    }
    .data{
      font-size: 12px;
      color: #999;
    }
  }
  .line{
    height:1px;
    width: 327px;
    background:rgba(238,238,238,1);

  }
  .que_c{

  }
  .res{
    dl{
      margin: 8px 0;
      border-left: 2px solid #5CB31B;
     padding-left: 4px;font-size: 15px;color: #666;
    }
    p{
      font-size: 16px;
      color: #444444;
      margin-bottom: 4px;
    }
    span{
      color: #999999;font-size: 12px;
    }
  }
  .btn_d{
    width:100%;
    height:44px;
    line-height: 44px;
    color: #fff;
    font-size: 17px;
    background:#CCCCCC;
    border-radius:8px;
    border:1px solid #D8E5F4;
    display: inline-block;
    outline: none;
    margin-bottom: 16px;
    margin-top: 10px;

  }
  .btn_d.act{
    background: #4A90E2;
    color: #fff;
  }
</style>
